<template>
    <div>
        <h3>{{ num }}</h3>
        <h3>{{ doubleNum }}</h3>
        <button @click="plusNum({ n: 10 })">点击加num</button>
        <button @click="plusNumWait({ n: 5 })">延时点击加num</button>
        <hr />
        <h1>电影列表</h1>
        <button @click="getMovieList">获取电影列表</button>
        <ol>
            <li v-for="movie in movieList" :key="movie.tvId">{{ movie.name }}</li>
        </ol>
    </div>
</template>

<script>
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
export default {
    name: "App",
    computed: {
        /*
        1.mapState会根据传入的参数会返回一个对象
        2.对象的形式为{num: fn}这里的fn是得到state中num值的函数
        3.将返回值展开写入computed属性，即可获得state值的计算属性
        */
        // ...mapState({ num: "num" }),
        ...mapState("Count", ["num"]),
        ...mapGetters("Count", ["doubleNum"]),
        ...mapState("Movie", ["movieList"]),
    },
    methods: {
        ...mapMutations("Count", ["plusNum"]),
        ...mapActions("Count", ["plusNumWait"]),
        ...mapActions("Movie", ["getMovieList"]),
    },
};
</script>

<style></style>
